<template>
  <div class="select-icon">
    <div @click="showSelectIconEvent">
      <el-input size="small" :value="value" placeholder="请选择图标">
        <template slot="prepend">
          <span v-if="selectIcon">
            <i v-if="activeIcon==='svg'">
              <svg class="svg-icon">
                <use :xlink:href="`#${selectIcon}`" />
              </svg>
            </i>
            <i v-if="activeIcon==='ele'" :class="[selectIcon]"></i>
            <i v-if="activeIcon==='ali'" :class="[selectIcon]"></i>
          </span>
          <i v-else class="el-icon-search"></i>
        </template>
      </el-input>
    </div>
    <div class="icon-container" v-show="showSelectIcon">
      <div class="icon-title">
        <!-- <span>请搜索图标</span> -->
        <el-input
          class="search"
          @input="searchIconEvent"
          @change="searchIconEvent"
          :value="searchIconValue"
          size="mini"
          placeholder="请搜索图标"
        ></el-input>
        <div class="icon-select-type">
          <a
            href="javascript:;"
            v-for="icon in icons"
            class="type"
            :class="{'icon-select-type-color': activeIcon===icon.type}"
            :key="icon.type"
            @click="clickIconType(icon.type)"
          >{{icon.type}}</a>
        </div>
      </div>
      <div class="icon-item">
        <el-scrollbar style="height:100%;width:100%">
          <span v-for="icon in icons" :key="icon.type">
            <i
              class="item"
              v-show="activeIcon === icon.type"
              @click="clickIconItem(item)"
              v-for="item in iconList"
              :key="item"
              :class="[`${item}`]"
            >
              <svg class="svg-icon" v-if="icon.type === 'svg'">
                <use :xlink:href="`#${item}`" />
              </svg>
            </i>
          </span>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import icons from './index'
export default {
  name: 'SelectIcon',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      searchIconValue: '',
      selectIcon: '',
      activeIcon: 'ele',
      showSelectIcon: false,
      icons,
      iconList: []
    }
  },
  created () {
    this.iconFilter()
  },
  methods: {
    iconFilter () {
      const iconObj = icons.find(item => item.type === this.activeIcon)
      this.iconList = iconObj ? iconObj.icons : []
    },
    clickIconType (iconType) {
      this.activeIcon = iconType
      this.selectIcon = ''
      this.iconFilter()
      this.searchIconEvent(this.searchIconValue)
    },
    showSelectIconEvent () {
      this.showSelectIcon = !this.showSelectIcon
    },
    searchIconEvent (v) {
      this.searchIconValue = v
      if (v) {
        this.iconList = this.iconList.filter(item => item.includes(v))
      } else {
        this.iconFilter()
      }
    },
    clickIconItem (iconName) {
      this.selectIcon = iconName
      this.$emit('input', iconName)
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 10px;
  height: 10px;
}

.select-icon {
  width: 80%;
  margin: 0 auto;

  .icon-container {
    height: 200px;
    border-radius: 5px;
    border: 1px solid #e4e7ed;
    background-color: #fff;
    overflow: hidden;
    .icon-title {
      display: flex;
      justify-content: space-between;
      color: #b7b9bd;
      border-bottom: 1px solid #e4e7ed;
      padding: 5px 5px;
      .icon-select-type {
        .type {
          margin: 0px 2px;
        }
      }
    }
  }
  .icon-item {
    height: 100%;
    .item {
      display: inline-block;
      width: 52px;
      height: 25px;
      font-style: normal;
      text-align: center;
      line-height: 25px;
      font-size: 15px;
      border-radius: 4px;
      border: 1px solid #e4e7ed;
      background-color: #fff;
      margin: 5px 0px 5px 11px;
      &:hover {
        cursor: pointer;
      }
    }
  }

  .icon-select-type-color {
    color: #409eff;
  }
}
</style>
